import React from 'react';
import { motion } from 'motion/react';
import { Clock, User, Bot } from 'lucide-react';

interface ChatBubbleProps {
  message: string;
  type: 'user' | 'system';
  timestamp?: string;
  isLoading?: boolean;
  avatar?: React.ReactNode;
}

export function ChatBubble({ 
  message, 
  type, 
  timestamp, 
  isLoading = false,
  avatar 
}: ChatBubbleProps) {
  const isUser = type === 'user';

  return (
    <motion.div
      className={`flex w-full mb-4 ${isUser ? 'justify-end' : 'justify-start'}`}
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.3, ease: "easeOut" }}
    >
      {/* 系统消息头像 */}
      {!isUser && (
        <div className="flex-shrink-0 mr-3">
          {avatar || (
            <div className="w-8 h-8 rounded-full bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center shadow-sm">
              <Bot className="w-4 h-4 text-white" />
            </div>
          )}
        </div>
      )}

      <div className={`flex flex-col ${isUser ? 'items-end' : 'items-start'} max-w-[75%]`}>
        {/* 系统消息标签 */}
        {!isUser && (
          <div className="mb-1 text-xs text-gray-500 ml-1">
            智能导诊助手
          </div>
        )}

        {/* 消息气泡 */}
        <motion.div
          className={`relative px-4 py-3 rounded-2xl shadow-sm ${
            isUser 
              ? 'bg-gray-100 text-gray-900 rounded-br-md' 
              : 'bg-gradient-to-br from-blue-500 to-blue-600 text-white rounded-bl-md'
          }`}
          whileHover={{ scale: 1.02 }}
          transition={{ duration: 0.2 }}
        >
          {/* 加载动画 */}
          {isLoading ? (
            <div className="flex items-center space-x-2">
              <motion.div
                className={`w-2 h-2 rounded-full ${isUser ? 'bg-gray-400' : 'bg-white'}`}
                animate={{ opacity: [0.3, 1, 0.3] }}
                transition={{ duration: 0.8, repeat: Infinity, delay: 0 }}
              />
              <motion.div
                className={`w-2 h-2 rounded-full ${isUser ? 'bg-gray-400' : 'bg-white'}`}
                animate={{ opacity: [0.3, 1, 0.3] }}
                transition={{ duration: 0.8, repeat: Infinity, delay: 0.2 }}
              />
              <motion.div
                className={`w-2 h-2 rounded-full ${isUser ? 'bg-gray-400' : 'bg-white'}`}
                animate={{ opacity: [0.3, 1, 0.3] }}
                transition={{ duration: 0.8, repeat: Infinity, delay: 0.4 }}
              />
            </div>
          ) : (
            <div className="whitespace-pre-wrap break-words leading-relaxed">
              {message}
            </div>
          )}

          {/* 气泡尖角 */}
          <div
            className={`absolute top-4 w-0 h-0 ${
              isUser
                ? 'right-0 translate-x-full border-l-[10px] border-l-gray-100 border-t-[6px] border-t-transparent border-b-[6px] border-b-transparent'
                : 'left-0 -translate-x-full border-r-[10px] border-r-blue-500 border-t-[6px] border-t-transparent border-b-[6px] border-b-transparent'
            }`}
          />
        </motion.div>

        {/* 时间戳 */}
        {timestamp && (
          <div className={`mt-1 text-xs text-gray-400 flex items-center ${isUser ? 'mr-1' : 'ml-1'}`}>
            <Clock className="w-3 h-3 mr-1" />
            {timestamp}
          </div>
        )}
      </div>

      {/* 用户头像 */}
      {isUser && (
        <div className="flex-shrink-0 ml-3">
          <div className="w-8 h-8 rounded-full bg-gradient-to-br from-gray-400 to-gray-500 flex items-center justify-center shadow-sm">
            <User className="w-4 h-4 text-white" />
          </div>
        </div>
      )}
    </motion.div>
  );
}